<style type="text/css" media="screen">
    ul#pages {
        list-style-type:none;
        margin:0;
        padding:0;
        width:400px;
    }
    #pages li {
        margin:0.5em 0;
        background:#D0E2F2;
        border: 1px solid #5b6c97;
        color:black;
        padding:5px;
        font-size:medium;
    }
    #pages span.handle {
        background:orange;
        color:#fff;
        text-transform:uppercase;
        font-weight:bold;
        padding:2px;
        font-size:small;
        cursor:move;
    }
    div.section {
        width: 400px;
    }
</style>
<form action="" onsubmit="submit_reorder();return false">
<?php
if ($subs && is_array($subs) && count($subs) > 1) {
    echo '<ul id="pages">';
    foreach ($subs as $sub) 
    {
        $span = content_tag('span','DRAG',array('class'=>'handle'));
        echo content_tag('li', $span.'&nbsp;&nbsp;&nbsp;'.$sub->get('title'), array('id'=>'pages_'.$sub->get('id')));
    }
    echo '</ul>';
    echo submit_tag('Save Page Order');
    ?>
    <script type="text/javascript" charset="utf-8">
        Sortable.create('pages',{handle:'handle'});
        function submit_reorder()
        {
           var params = Sortable.serialize('pages');
           new Ajax.Updater('success_messages','reorder',{parameters:params,onComplete:toggle_success()});   
        }
    </script>
<?php    
} else {
    echo '<ul id="pages">';
    echo content_tag('li', $subs[0]->get('title'));
    echo '</ul>';
    echo content_tag('p', "Need more than 1 sub page to do reordering");
}
?>
</form>